<!DOCTYPE html>
<html>
<body>
<canvas id="circuitCanvas" width="600" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Function to draw a bulb with a specific filament style
    function drawBulb(cx, cy, type) {
        const radius = 22;
        // Outer circle
        ctx.beginPath();
        ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
        ctx.stroke();

        // Inner filament, styled to match the original image
        ctx.save();
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        if (type === 'vertical') { // For bulbs 1 and 3
            // An oval loop with a small stem
            ctx.moveTo(cx, cy + 10);
            ctx.lineTo(cx, cy + 14);
            ctx.moveTo(cx, cy + 10);
            ctx.quadraticCurveTo(cx + 12, cy, cx, cy - 12);
            ctx.quadraticCurveTo(cx - 12, cy, cx, cy + 10);
        } else { // For bulbs 2 and 4
            // A horizontal lens shape
            ctx.moveTo(cx - 15, cy);
            ctx.quadraticCurveTo(cx, cy - 10, cx + 15, cy);
            ctx.moveTo(cx - 15, cy);
            ctx.quadraticCurveTo(cx, cy + 10, cx + 15, cy);
        }
        ctx.stroke();
        ctx.restore();
    }

    // --- Main Drawing Logic ---

    // 1. Define coordinates
    const bat_x = 100;
    const bat_y_pos = 150;
    const bat_y_neg = 200;
    const top_y = 100;
    const bottom_y = 300;
    const junction1_x = 300;
    const right_wire_x = 500;
    const b1_pos = { x: 200, y: top_y };
    const b2_pos = { x: junction1_x, y: 200 };
    const b3_pos = { x: 400, y: top_y };
    const b4_pos = { x: right_wire_x, y: 200 };
    const point_A = { x: 200, y: bottom_y };
    const point_B = { x: right_wire_x, y: 140 };

    // 2. Battery and its label
    ctx.beginPath();
    ctx.moveTo(bat_x - 30, bat_y_pos); // Positive terminal (long line)
    ctx.lineTo(bat_x + 30, bat_y_pos);
    ctx.moveTo(bat_x - 15, bat_y_neg); // Negative terminal (short line)
    ctx.lineTo(bat_x + 15, bat_y_neg);
    ctx.stroke();

    // Battery Label 'V_bat'
    ctx.font = 'italic 30px serif';
    ctx.fillText('V', 60, 185);
    ctx.font = 'italic 20px serif';
    ctx.textBaseline = 'top'; // Align subscript properly
    ctx.fillText('bat', 72, 188);
    ctx.textBaseline = 'middle'; // Reset for others

    // 3. Wires (drawn in segments to leave space for components)
    ctx.beginPath();
    // Left vertical wires from battery
    ctx.moveTo(bat_x, bat_y_pos);
    ctx.lineTo(bat_x, top_y);
    ctx.moveTo(bat_x, bat_y_neg);
    ctx.lineTo(bat_x, bottom_y);

    // Bottom wire
    ctx.moveTo(bat_x, bottom_y);
    ctx.lineTo(right_wire_x, bottom_y);

    // Top wire segments
    ctx.moveTo(bat_x, top_y);
    ctx.lineTo(b1_pos.x - 22, top_y); // to bulb 1
    ctx.moveTo(b1_pos.x + 22, top_y); // from bulb 1
    ctx.lineTo(junction1_x, top_y);   // to junction
    ctx.moveTo(junction1_x, top_y);   // from junction
    ctx.lineTo(b3_pos.x - 22, top_y); // to bulb 3
    ctx.moveTo(b3_pos.x + 22, top_y); // from bulb 3
    ctx.lineTo(right_wire_x, top_y);  // to corner

    // Central vertical wire segments
    ctx.moveTo(junction1_x, top_y);
    ctx.lineTo(junction1_x, b2_pos.y - 22); // to bulb 2
    ctx.moveTo(junction1_x, b2_pos.y + 22); // from bulb 2
    ctx.lineTo(junction1_x, bottom_y);

    // Right vertical wire segments
    ctx.moveTo(right_wire_x, top_y);
    ctx.lineTo(right_wire_x, b4_pos.y - 22); // to bulb 4
    ctx.moveTo(right_wire_x, b4_pos.y + 22); // from bulb 4
    ctx.lineTo(right_wire_x, bottom_y);

    ctx.stroke();

    // 4. Bulbs and their labels
    drawBulb(b1_pos.x, b1_pos.y, 'vertical');
    drawBulb(b2_pos.x, b2_pos.y, 'horizontal');
    drawBulb(b3_pos.x, b3_pos.y, 'vertical');
    drawBulb(b4_pos.x, b4_pos.y, 'horizontal');
    
    // Bulb labels
    ctx.font = 'bold 24px sans-serif';
    ctx.fillText('1', b1_pos.x + 35, b1_pos.y - 5);
    ctx.fillText('2', b2_pos.x + 35, b2_pos.y);
    ctx.fillText('3', b3_pos.x + 35, b3_pos.y - 5);
    ctx.fillText('4', b4_pos.x + 35, b4_pos.y);

    // 5. Points A and B and their labels
    // Point A
    ctx.beginPath();
    ctx.arc(point_A.x, point_A.y, 5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('A', point_A.x, point_A.y + 25);

    // Point B
    ctx.beginPath();
    ctx.arc(point_B.x, point_B.y, 5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('B', point_B.x + 25, point_B.y);

</script>
</body>
</html>